<!-- 表格的输入框搜索 + select切换搜索的组件 -->
<template>
  <div class="header-search pt-12 pb-24">
    <div class="search-box">
      <div class="input">
        <a-input
          v-model:value="inputValue"
          v-trim
          :placeholder="placeholder"
          class="list-search-input"
          allow-clear
          @input="onInputValue"
          @pressEnter="onSearch"
        >
          <template #prefix><SearchOutlined /></template>
        </a-input>
      </div>
      <svg
        v-if="selectDisplay"
        xmlns="http://www.w3.org/2000/svg"
        width="2"
        height="20"
        viewBox="0 0 2 20"
        fill="none"
        class="list-search-line"
      >
        <path d="M1 0V20" stroke="#E8E9EB" />
      </svg>
      <a-select
        v-if="selectDisplay"
        v-model:value="selectValue"
        class="w-140"
        :options="options"
        :placeholder="selectPlaceholder"
        @change="onSelectValueChange"
      />
      <slot name="other"></slot>
    </div>
    <slot name="button"></slot>
  </div>
</template>
<script lang="ts" setup>
  import { debounce } from 'g6-fn'
  import { ref } from 'vue'

  export interface SelectOptions {
    label: string
    value: string | number
  }

  export interface HeaderSearchProps {
    // input提示文字
    placeholder?: string
    // select提示文字
    selectPlaceholder?: string
    // input值
    inputValue?: string
    // select值
    selectValue?: string
    // select选项
    options?: SelectOptions[]
    selectDisplay?: boolean
  }

  export interface HeaderSearchEvents {
    inputValue: string
    selectValue: string
  }

  const emits = defineEmits(['update:inputValue', 'update:selectValue', 'onSearch'])

  const props = withDefaults(defineProps<HeaderSearchProps>(), {
    placeholder: '',
    inputValue: '',
    options: () => [],
    selectValue: undefined,
    selectDisplay: true
  })

  const inputValue = ref(props.inputValue)
  const selectValue = ref(props.selectValue)

  const onInputValue = (e: any) => {
    const value = e.target.value
    inputValue.value = value
    emits('update:inputValue', value)
    // value === '' && onSearch()
  }

  const onSelectValueChange = (value: any) => {
    selectValue.value = value
    emits('update:selectValue', value)
    onSearch()
  }

  const onSearch = debounce(() => {
    emits('onSearch', {
      inputValue: inputValue.value,
      selectValue: selectValue.value
    })
  }, 500)
</script>
<style lang="less" scoped>
  .search-box {
    display: flex;
    align-items: center;
    height: 36px;
    min-height: 36px;
    gap: 8px;

    .list-search-input {
      width: 268px;
    }
  }

  .header-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
